export default class Hotcss {
    // 构造函数
    constructor() {
        this.initSuccess = false;
        this.dpr = 0
        this.maxWidth = 0
        this.designWidth = 0;
        this.tid = 0;

        this.init();
    }

    init() {
        var _this = this
        //根据devicePixelRatio自定计算scale
        //可以有效解决移动端1px这个世纪难题。
        var viewportEl = document.querySelector('meta[name="viewport"]');
        var hotcssEl = document.querySelector('meta[name="hotcss"]');
        var dpr = window.devicePixelRatio || 1;
        var maxWidth = 540;
        var designWidth = 0;

        dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

        //允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
        if (hotcssEl) {
            var hotcssCon = hotcssEl.getAttribute('content');
            if (hotcssCon) {
                var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
                if (initialDprMatch) {
                    dpr = parseFloat(initialDprMatch[1]);
                }
                var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
                if (maxWidthMatch) {
                    maxWidth = parseFloat(maxWidthMatch[1]);
                }
                var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
                if (designWidthMatch) {
                    designWidth = parseFloat(designWidthMatch[1]);
                }
            }
        }

        document.documentElement.setAttribute('data-dpr', dpr);
        _this.dpr = dpr;

        document.documentElement.setAttribute('max-width', maxWidth);
        _this.maxWidth = maxWidth;

        if (designWidth) {
            document.documentElement.setAttribute('design-width', designWidth);
        }
        _this.designWidth = designWidth; // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN

        var scale = 1 / dpr,
            content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';

        if (viewportEl) {
            viewportEl.setAttribute('content', content);
        } else {
            viewportEl = document.createElement('meta');
            viewportEl.setAttribute('name', 'viewport');
            viewportEl.setAttribute('content', content);
            document.head.appendChild(viewportEl);
        }

        _this.initSuccess = true;
    }

    //预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
    px2rem(px, designWidth) {
        if (!designWidth) {
            //如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
            //否则可以在第二个参数告诉我你的设计图是多大。
            designWidth = parseInt(this.designWidth, 10);
        }

        return parseInt(px, 10) * 320 / designWidth / 20;
    }

    rem2px(rem, designWidth) {
        if (!designWidth) {
            designWidth = parseInt(hotcss.designWidth, 10);
        }

        //rem可能为小数，这里不再做处理了
        return rem * 20 * designWidth / 320;
    }

    // 这个就是核心方法了，给HTML设置font-size。
    mresize() {
        var _this = this
        var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
        if (_this.maxWidth && (innerWidth / _this.dpr > _this.maxWidth)) {
            innerWidth = _this.maxWidth * _this.dpr;
        }
        if (!innerWidth) {
            return false;
        }

        document.documentElement.style.fontSize = (innerWidth * 20 / 320) + 'px';

        _this.callback && _this.callback();
    }

    start() {
        var _this = this;
        if (!_this.initSuccess) {
            _this.init();
        }

        _this.mresize();

        //绑定resize的时候调用
        window.addEventListener('resize', function () {
            clearTimeout(_this.tid);
            _this.tid = setTimeout(function(){
                _this.mresize();
            }, 33);
        }, false);

        // 防止不明原因的bug。load之后再调用一次。
        window.addEventListener('load', _this.mresize, false);

        //防止某些机型怪异现象，异步再调用一次
        setTimeout(function () {
            _this.mresize();
        }, 333)
    }
}
